<template>
  <div class="flex-center">
    <div class="w-[1141px] h-[705px] bg relative"
         style="background-image: url(https://img.alicdn.com/imgextra/i1/801089336/O1CN01F0gzWg2IpwkYRCYoR_!!801089336.png)">
      <div class="icon flex-center mt-[54px]">
        <div class="w-[32px] h-[32px] bg"
             style="background-image: url(https://img.alicdn.com/imgextra/i3/801089336/O1CN01w8cwfq2IpwkMyVMy2_!!801089336.png)"></div>
      </div>

      <div class="mt-[54px] text-bold flex-center">恭喜您，支付成功！</div>

      <div class="flex-center mt-[15px]">
        <div class="w-[100%]  flex-center">
          <div class="w-[200px] flex">
            <div class="label text-[#666666]">订单号：</div>
            <div class="value text-[#666666]">{{ orderInfo.no }}</div>
          </div>
        </div>
      </div>

      <div class="mt-[15px]">
        <div class="w-[100%] flex-center">
          <div class="w-[200px] flex">
            <div class="label  text-[#666666]">订单金额：</div>
            <div class="value text-[#FF4E00]">￥{{ selectedPackage.discountPrice }}</div>
          </div>

        </div>


      </div>

      <div class="flex-center mt-[15px]">

        <el-button @click="router.go(-1)">返回费用中心</el-button>

      </div>


      <div class="orderInfo mt-[120px] flex-center">
        <div class="table">
          <div class="thead w-[1015px] h-[36px] px-[15px] bg-[#F5F5F5] flex items-center">
            订单详情
          </div>

          <div class="tbody w-[1015px] h-[36px] flex items-center">
            <div class="label text-[#999999] px-[15px] w-[120px]">
              订单号
            </div>

            <div class="value px-[15px]">
              {{ orderInfo.no }}
            </div>
          </div>

          <div class="tbody w-[1015px] h-[36px] flex items-center">
            <div class="label text-[#999999] px-[15px] w-[120px]">
              交易类型
            </div>

            <div class="value px-[15px]">
              {{ payType.find(at => at.code == selectedPackage.type)?.name }}
            </div>
          </div>

          <div class="tbody w-[1015px] h-[36px] flex items-center">
            <div class="label text-[#999999] px-[15px] w-[120px]">
              支付时间
            </div>

            <div class="value px-[15px]">
              {{ selectedPackage.time }}
            </div>
          </div>


          <div class="tbody w-[1015px] h-[36px] flex items-center">
            <div class="label text-[#999999] px-[15px] w-[120px]">
              支付方式
            </div>

            <div class="value px-[15px]">
              {{ selectedPackage.method }}
            </div>
          </div>


        </div>

      </div>


    </div>
  </div>
</template>
<script setup lang="ts">
import {useAppStore} from "@/store/modules/app";

const app = useAppStore();
const router = useRouter();

const orderInfo = ref({});

const selectedPackage = ref({})

const payType = ref([
  {
    code: 1,
    name: "套餐购买"
  },
  {
    code: 2,
    name: "席位购买"
  },
  {
    code: 3,
    name: "余额充值"
  },
  {
    code: 4,
    name: "流量购买"
  }
])

watch(() => app.payStatus, () => {
  if (app.payStatus) {
    app.payStatus = false;
  }
}, {
  immediate: true
})

const initPage = () => {
  let payInfo = sessionStorage.getItem("payInfo");


  if (payInfo) {
    let obj = JSON.parse(payInfo);
    console.log(obj)
    orderInfo.value = obj.orderInfo;
    selectedPackage.value = obj.selectedPackage;
  }

}

onMounted(() => {
  initPage();
})
</script>
<style lang="scss" scoped>
.table {
  border: solid 1px rgba(221, 221, 221, 0.6);

  .tbody {
    border-top: solid 1px rgba(221, 221, 221, 0.6);

    .label {
      border-right: solid 1px rgba(221, 221, 221, 0.6);
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
}
</style>
